dojo.provide("mobl._base.html");

dojo.provide("mobl._base.html");

// summary:
//		mobl._base.html contains helper functions to straighten behaviour between different devices
(function(m){
	m.nodeOverflowAuto = function(node, container){
		// summary:
		// 		the iPhone does not support overflow: auto the way we expect (scroll with one finger)
		//		so we are adding this functionality to a node here.
		//		This still needs some more thought because ideally we don't even have to think about
		//		making this function call when using an iPhone.
		//		The overhead is probably to high, but the direction should be that all nodes with overflow: auto
		//		should be calling this function.
		
		// only do this when we are using the iPhone
		if (!m.isIPhone || !node || !container){
			return;
		}
	 
		var that = this;
		// FIXME: is there a better way???
		(function(node, container){
			var startY = 0,
			endY = 0,
			currentY = 0,
			scrollOffset = 0,
			scrolled = false,
			timeStart,
			timeEnd;
			
			this.foo;
			
			node.ontouchstart = function(e){
				// summary:
				//		We get the initial offset of the fingertip so we can calculate the offset of the node we are scrolling
				scrolled = false;
				startY = initY = e.touches[0].clientY;
				timeStart = e.timeStamp;
				e.preventDefault();
	
				// TODO: stop ongoing animation if user taps screen again
			}
	
			node.ontouchmove = function(e){
				// summary:
				//		this does the actual scrolling of the node using CSS transitions (way higher performance!!!)
				
				scrolled = true;
				if(e.touches.length == 1){ // Only deal with one finger
					var touch = e.touches[0]; // Get the information for finger #1
					
					endY = e.touches[0].clientY;
					scrollOffset = startY-endY;
					startY = endY;
					currentY = currentY+scrollOffset;
				
					node.style.webkitTransform = "translateY("+-currentY+"px)";
				}
				
				// prevent the native scroll from happening
				e.preventDefault();
			}
			
			node.ontouchend = function(e){
				// summary:
				//		on touch end we smoothly let the dragged node slow down and stop
				//		this still needs optimisation!!!
				
				// simulate mouseclick 
				if (!scrolled){
					var eTarget = e.target.nodeType == 3 ? e.target.parentNode : e.target,
					eEvent = document.createEvent("MouseEvents");
					
					eEvent.initEvent('click', true, true);
					eTarget.dispatchEvent(eEvent);
				}else{
					timeEnd = e.timeStamp;
					endY = e.changedTouches[0].clientY;
					scrollOffset = startY-endY;
					currentY = currentY+scrollOffset;
					
					// We calculate this everytime we scroll in case content changes
					var contentHeight = dojo.marginBox(node).h,
					containerHeight = dojo.contentBox(container).h;
					
					if (contentHeight < containerHeight){
						that.moveToY(node, 0);
						currentY = 0;
					}else{
						var timeDiff = timeEnd - timeStart;
						var speed = Math.abs((initY-endY)/timeDiff);
						var extrY = (initY-endY)*speed;
						currentY += extrY;
						
						if (currentY < 0){
							that.moveToY(node, 0);
							currentY = 0;
						}else if (currentY > contentHeight-containerHeight){
							that.moveToY(node, contentHeight-containerHeight);
							currentY = contentHeight-containerHeight;
						}else{
							that.moveToY(node, currentY);
						}
					}
				}
			}
		})(node, container);
	}
	
	m.moveToY = function(node, y){
		// summary:
		//		smoothly moves a node to a certain y position.
		var ms = 350; // number of milliseconds

		if (m.isIPhone){
			// FIXME: clean those 25000 var statements here
			// Grab current offset
			var top = parseFloat((/translateY\((\-?.*)px\)/).exec(node.style.webkitTransform)[1]);
			
			// Convert negative to positive if need be
			var currentTop = (top < 0) ? -(top) : top;
			
			// Divide offset by 250 (more offset = more scroll time)
			var chunks = (currentTop / 100);
			
			// Calculate total time
			var totalTime = (ms * chunks);
			
			// Make sure time does not exceed 750ms
			totalTime = (totalTime > 750) ? 750 : totalTime;
			
			// Prep for animation
			node.style.webkitTransition = "-webkit-transform " + totalTime + "ms cubic-bezier(0.1, 0.25, 0.1, 1.0)";
			node.style.webkitTransform = "translateY("+-y+"px)";
			
			// Clean up after ourselves
			setTimeout(function() {
				node.style.webkitTransition = "none";
			}, totalTime);
		}else{
			dojo.style(node, "top", y+"px");
		}
	}
})(mobl);